<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>完美商城</title>
	<link rel="stylesheet" href="css/shopping.css">
	<link rel="stylesheet" href="css/reset.css">
	<script src="js/jquery.min.js"></script>
	<script>
		$(function(){
		   $("div.add a").on("click",function(){
		       var car = $(this).parent().parent().clone(true);

               var target = $("span>i.car").offset(); //获取动画的目标位置
			   var current = $(this).offset();//获取当前位置
               var targetW = $("i.car").width();//获取购物车图标宽度
               var targetH = $("i.car").height();//获取购物车图标高度

		       car.css("position","absolute").css("z-index",19999).css("left",current.left).css("top",current.top);

               $("div.produce_list").parent().append(car);

		       car.animate({"left":target.left,"top":target.top,"width":targetW,"height":targetH},400,function(){
		           $("font.cartNum").html(parseInt($("font.cartNum").html())+1);
		           car.remove();
			   });

		   });
		});
	</script>
</head>
<body>
	<!-- 所有的盒子 -->
	<div class="All">
		<!-- 头部的div -->
		<div class="head">
			<div class="wrap">
				<span class="f_left_welcome">欢迎来到完美世界周边商城！</span>
				<div class="f_right_shopping">
					<a href="" class="text">
						<span class="icon"></span>
						购物车
						<span class="cartNum">(0)</span>
					</a>
					<div class="shopping_list">
						<div class="list_null">
							购物车还没有商品，快去挑选商品吧！
						</div>
					</div>
				</div>
				<dl class="f_right">
					<dt><a href="javascript:void(0)" class="needLogin">我的订单</a></dt>
					<dd><a href="javascript:void(0)" class="needLogin">我的关注</a></dd>
				</dl>
				<dl class="userlogin">
					<dt><a href="javascript:void(0)" class="needLogin">登录</a></dt>
					<dd><a href="javascript:void(0)">注册</a></dd>
				</dl>
			</div>
		</div>

		<!-- 右侧的导航栏 -->
		<div class="fixed_bar">
			<dl>
				<dd class="center right_nav">
					<a href="javascript:void(0)" class="needLogin">
						<span></span>
					</a>
					<p class="tip">
						<a href="javascript:void(0)">个人中心</a>
					</p>
				</dd>
				<dd class="my_like right_nav">
					<a href="javascript:void(0)" class="needLogin">
						<span></span>
					</a>
					<p class="tip">
						<a href="javascript:void(0)">我的关注</a>
					</p>
				</dd>
				<dd class="fixed_cart_tip">
					<a href="javascript:void(0)">
						<span>
							<i class="car"></i>
							购物车
							<font class="cartNum">0</font>
						</span>
					</a>
				</dd>
				<dd class="online right_nav">
					<a href="javascript:void(0)" class="needLogin">
						<span></span>
					</a>
					<p class="tip">
						<a href="javascript:void(0)">在线客服</a>
					</p>
				</dd>
			</dl>
			<p class="go_top" title="Scroll Back to top">
				<a href="javascript:void(0)">
					<span></span>
				</a>
			</p>
		</div>
		
		<!-- 顶部导航 -->
		<div class="top_nav">
			<div class="wrap">
				<a href="javascript:void(0)" class="f_left_logo">
					<img src="image/shopping/logo_wm.png" alt="">
				</a>
				<a href="javascript:void(0)" class="f_left_font">
					<img src="image/shopping/logo_shop.png" alt="">
				</a>
				<div class="f_left_allshop">
					<p class="text">
						<span class="text"></span>
						全部商品
					</p>
					<ul>
						<li class="lis">
							<a href="javascript:void(0)" class="ellipsis2" title="DOTA2神秘商店">
								DOTA2神秘商店
								<em></em>
							</a>
							<dl id="dlbg">
								<dd><a href="javascript:void(0)">手办扭蛋</a></dd>
								<dd><a href="javascript:void(0)">创意T袖</a></dd>
								<dd><a href="javascript:void(0)">流行服饰</a></dd>
								<dd><a href="javascript:void(0)">生活用品</a></dd>
								<dd><a href="javascript:void(0)">毛绒合辑</a></dd>
							</dl>
						</li>
						<li class="lis">
							<a href="javascript:void(0)" class="ellipsis2" title="完美世界周边">
								完美世界周边
								<em></em>
							</a>
							<dl id="dlbg">
								<dd><a href="javascript:void(0)">诛仙3专区</a></dd>
							</dl>
						</li>
						<li class="lis">
							<a href="javascript:void(0)" class="ellipsis2" title="影视衍生品区">
								影视衍生品区
								<em></em>
							</a>
							<dl id="dlbg">
								<dd><a href="javascript:void(0)">神犬小七周边</a></dd>
								<dd><a href="javascript:void(0)">射雕英雄传周边</a></dd>
								<dd><a href="javascript:void(0)">变形金刚电影周边</a></dd>
							</dl>
						</li>
						<li class="lis">
							<a href="javascript:void(0)" class="ellipsis2" title="CSGO正版周边">
								CSGO正版周边
								<em></em>
							</a>
							<dl id="dlbg">
								<dd><a href="javascript:void(0)">暂时没有</a></dd>
							</dl>
						</li>
						<li class="lis">
							<a href="javascript:void(0)" class="ellipsis2" title="蒋小虎系列周边">
								蒋小虎系列周边
								<em></em>
							</a>
							<dl id="dlbg">
								<dd><a href="javascript:void(0)">暂时没有</a></dd>
							</dl>
						</li>
						<li class="lis">
							<a href="javascript:void(0)" class="ellipsis2" title="游戏外设">
								游戏外设
								<em></em>
							</a>
							<dl id="dlbg">
								<dd><a href="javascript:void(0)">键盘</a></dd>
								<dd><a href="javascript:void(0)">鼠标</a></dd>
								<dd><a href="javascript:void(0)">耳机</a></dd>
							</dl>
						</li>
					</ul>
				</div>

				<ul class="top_nav_nav">
					<li><a href="javascript:void(0)">首页</a></li>
					<li><a href="javascript:void(0)">完美世界周边</a></li>
					<li><a href="javascript:void(0)">DOAT2专区</a></li>
					<li><a href="javascript:void(0)">FAQ</a></li>
				</ul>

				<div class="f_left_input">
					<form action="" class="cf">
						<input type="text" class="text">
						<input type="button" class="btn">
						<span class="keyword">
							<a href="javascript:void(0)" class="tj_link">敌法师</a>
							<a href="javascript:void(0)" class="tj_link">国际金猪</a>
						</span>
						<!-- <div class="keyword_list">
							<dl></dl>
						</div> -->
					</form>
				</div>
			</div>
		</div>

		<!-- 中间轮播图 -->
		<div class="head_slide">
			<div class="bd">
				<div class="tempWrap">
					<ul>
						<li><a href="javascript:void(0)"><img src="image/shopping/bg_01.jpg" alt=""></a></li>
						<li><a href="javascript:void(0)"><img src="image/shopping/bg_02.jpg" alt=""></a></li>
						<li><a href="javascript:void(0)"><img src="image/shopping/bg_03.jpg" alt=""></a></li>
					</ul>
					<div class="focus">
						<span class="left"><</span>
						<span class="right">></span>
					</div>
					<div class="num">
						<span class="bgred"></span>
						<span></span>
						<span></span>
					</div>
				</div>
			</div>
		</div>

		<!-- 轮播下广告 -->
		<div class="buying">
			<div class="wrap">
				<div class="ad_list">
					<a href="javascript:void(0)"><img src="image/shopping/gg_01.jpg" width="386px" height="160px" alt=""></a>
					<a href="javascript:void(0)"><img src="image/shopping/gg_02.jpg" width="386px" height="160px" alt=""></a>
					<a href="javascript:void(0)"><img src="image/shopping/gg_03.jpg"  width="386px" height="160px" alt=""></a>
				</div>
			</div>
		</div>

		<!-- 专区 -->
		<div class="all_produce">
			<div class="wrap">
				<div class="title_main">
					<p class="title_main_left">
						<span class="icon">
							<img src="image/shopping/produce_logo.jpg" width="35" height="35" alt="">
						</span>
						电竞外设专区
					</p>
				</div>
				<div class="produce_img">
					<a href="javascript:void(0)"><img src="image/shopping/produce_img.jpg" alt=""></a>
					<div class="produce_list">
						<p class="discount">
							<span>96</span>
							折
						</p>
						<a href="javascript:void(0)" class="like">
							<span></span>
							<font>1</font>
						</a>
						<a href="javascript:void(0)">
							<img src="image/shopping/shopping_01.jpg" alt="teelseries/赛睿 Arctis Pro 寒冰 Pro 头戴式 游戏耳机耳麦">
						</a>
						<p class="name">teelseries/赛睿 Arctis Pro 寒冰 Pro 头戴式 游戏耳机耳麦 </p>
						<p class="price">
							¥1499.00
							<s>¥1599.00</s>
						</p>
						<div class="add">
							<a href="javascript:void(0)" class="star"></a>
							<a href="javascript:void(0)" class="btn">
								<span></span>
								加入购物车
							</a>
						</div>
					</div>

					<div class="produce_list">
						<p class="discount">
							<span>96</span>
							折
						</p>
						<a href="javascript:void(0)" class="like">
							<span></span>
							<font>1</font>
						</a>
						<a href="javascript:void(0)">
							<img src="image/shopping/shopping_02.jpg" alt="赛睿 rival 600 有线游戏鼠标rgb宏编程双传感防滑侧裙配重">
						</a>
						<p class="name">赛睿 rival 600 有线游戏鼠标rgb宏编程双传感防滑侧裙配重</p>
						<p class="price">
							¥659.00
							<s>¥690.00</s>
						</p>
						<div class="add">
							<a href="javascript:void(0)" class="star"></a>
							<a href="javascript:void(0)" class="btn">
								<span></span>
								加入购物车
							</a>
						</div>
					</div>

					<div class="produce_list">
						<p class="discount">
							<span>96</span>
							折
						</p>
						<a href="javascript:void(0)" class="like">
							<span></span>
							<font>1</font>
						</a>
						<a href="javascript:void(0)">
							<img src="image/shopping/shopping_03.jpg" alt="SteelSeries赛睿 Rival 700 有线游戏鼠标rgb幻彩呼吸灯">
						</a>
						<p class="name">SteelSeries赛睿 Rival 700 有线游戏鼠标rgb幻彩呼吸灯</p>
						<p class="price">
							¥699.00
							<s>¥719.00</s>
						</p>
						<div class="add">
							<a href="javascript:void(0)" class="star"></a>
							<a href="javascript:void(0)" class="btn">
								<span></span>
								加入购物车
							</a>
						</div>
					</div>

					<div class="produce_list" style="margin-right: 0">
						<p class="discount">
							<span>96</span>
							折
						</p>
						<a href="javascript:void(0)" class="like">
							<span></span>
							<font>1</font>
						</a>
						<a href="mouse.html" target="_blank">
							<img src="image/shopping/shopping_04.jpg" alt="SteelSeries赛睿 rival 100 光学有线电竞游戏鼠标 RGB呼吸灯">
						</a>
						<p class="name">SteelSeries赛睿 rival 100 光学有线电竞游戏鼠标 RGB呼吸灯</p>
						<p class="price">
							¥199.00
							<s>¥299.00</s>
						</p>
						<div class="add">
							<a href="javascript:void(0)" class="star"></a>
							<a href="javascript:void(0)" class="btn">
								<span></span>
								加入购物车
							</a>
						</div>
					</div>

					<div class="produce_list">
						<p class="discount">
							<span>96</span>
							折
						</p>
						<a href="javascript:void(0)" class="like">
							<span></span>
							<font>1</font>
						</a>
						<a href="javascript:void(0)">
							<img src="image/shopping/shopping_05.jpg" alt="赛睿 Rival 300s 有线RGB游戏鼠标  csgo">
						</a>
						<p class="name">赛睿 Rival 300s 有线RGB游戏鼠标  csgo</p>
						<p class="price">
							¥399.00
							<s>¥499.00</s>
						</p>
						<div class="add">
							<a href="javascript:void(0)" class="star"></a>
							<a href="javascript:void(0)" class="btn">
								<span></span>
								加入购物车
							</a>
						</div>
					</div>

					<div class="produce_list">
						<p class="discount">
							<span>96</span>
							折
						</p>
						<a href="javascript:void(0)" class="like">
							<span></span>
							<font>1</font>
						</a>
						<a href="keyboard.html" target="_blank">
							<img src="image/shopping/shopping_06.jpg" alt="赛睿 Apex M500 专业游戏背光机械键盘有线104cherry樱桃红轴青轴">
						</a>
						<p class="name">赛睿 Apex M500 专业游戏背光机械键盘有线104cherry樱... </p>
						<p class="price">
							¥819.00
							<s>¥849.00</s>
						</p>
						<div class="add">
							<a href="javascript:void(0)" class="star"></a>
							<a href="javascript:void(0)" class="btn">
								<span></span>
								加入购物车
							</a>
						</div>
					</div>

					<div class="produce_list">
						<p class="discount">
							<span>96</span>
							折
						</p>
						<a href="javascript:void(0)" class="like">
							<span></span>
							<font>1</font>
						</a>
						<a href="javascript:void(0)">
							<img src="image/shopping/shopping_07.jpg" alt="steelseries/赛睿 Arctis 3寒冰3 RGB游戏耳机7.1">
						</a>
						<p class="name">steelseries/赛睿 Arctis 3寒冰3 RGB游戏耳机7.1</p>
						<p class="price">
							¥629.00
							<s>¥649.00</s>
						</p>
						<div class="add">
							<a href="javascript:void(0)" class="star"></a>
							<a href="javascript:void(0)" class="btn">
								<span></span>
								加入购物车
							</a>
						</div>
					</div>

					<div class="produce_list" style="margin-right: 0">
						<p class="discount">
							<span>96</span>
							折
						</p>
						<a href="javascript:void(0)" class="like">
							<span></span>
							<font>1</font>
						</a>
						<a href="earphone.html" target="_blank">
							<img src="image/shopping/shopping_08.jpg" alt="steelseries/赛睿 Arctis 7寒冰7 头戴式无线游戏耳机麦">
						</a>
						<p class="name">steelseries/赛睿 Arctis 7寒冰7 头戴式无线游戏耳机麦</p>
						<p class="price">
							¥1399.00
							<s>¥1499.00</s>
						</p>
						<div class="add">
							<a href="javascript:void(0)" class="star"></a>
							<a href="javascript:void(0)" class="btn">
								<span></span>
								加入购物车
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<!-- 关于我们专区 -->
		<div class="about">
			<div class="wrap">
				<ul>
					<li class="goods">
						<span></span>
						正品保证
					</li>
					<li class="shopping">
						<span></span>
						轻松购物
					</li>
					<li class="logistics">
						<span></span>
						快速配送
					</li>
					<li class="return">
						<span></span>
						无忧退换
					</li>
				</ul>
				<div class="link">
					<dl>
						<dt>购买指南</dt>
						<dd><a href="javascript:void(0)">常见问题</a></dd>
						<dd><a href="javascript:void(0)">订单状态</a></dd>
						<dd><a href="javascript:void(0)">购买流程</a></dd>
						<dd><a href="javascript:void(0)">支付方式</a></dd>
					</dl>
					<dl>
						<dt>配送方式</dt>
						<dd><a href="javascript:void(0)">配送范围</a></dd>
						<dd><a href="javascript:void(0)">快速费用</a></dd>
					</dl>
					<dl>
						<dt>售后服务</dt>
						<dd><a href="javascript:void(0)">退换货流程</a></dd>
						<dd><a href="javascript:void(0)">退换货政策</a></dd>
						<dd><a href="javascript:void(0)">服务政策</a></dd>
					</dl>
					<dl>
						<dt>关注我们</dt>
						<dd><a href="javascript:void(0)">公司官网</a></dd>
						<dd><a href="javascript:void(0)">官方微信</a></dd>
						<dd class="hezuo">
							<a href="javascript:void(0)">商务合作</a>
							<div class="tip">
								<p>联系人：张女士</p>
								<p>
									邮箱：
									<span>zhangchenrui@pwrd.com</span>
								</p>
								<p>
									联系电话：
									<span>010-57805531</span>
								</p>
							</div>
						</dd>
					</dl>
					<div class="contact">
						<p class="tel">028-68723699</p>
						<p class="time">周一至周日 9:00-22:00</p>
						<a href="javascript:void(0)">
							<span></span>
							在线客户
						</a>
					</div>
				</div>
			</div>
		</div>
		
		<!-- 合作伙伴 -->
		<div class="partners">
			<div id="wrap">
				<div class="picScroll-left">
					<div class="hd">
						<h1>合作伙伴</h1>
					</div>
					<div class="bd">
						<div class="tempWrap">
							<ul>
								<li><a href="javascript:void(0)"><img src="image/shopping/bt_01.jpg" alt=""></a></li>
								<li><a href="javascript:void(0)"><img src="image/shopping/bt_02.png" alt=""></a></li>
							</ul>
							<div class="square">
								<span class="square_current"></span>
								<span></span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 底部结束 -->
		<div class="copyright">
			<div class="wrap">
				<ul>
					<li><a href="javascript:void(0)">公司介绍</a></li>
					<li><a href="javascript:void(0)">开发团队</a></li>
					<li><a href="javascript:void(0)">招聘信息</a></li>
					<li><a href="javascript:void(0)">联系我们</a></li>
					<li><a href="javascript:void(0)">法律声明</a></li>
					<li><a href="javascript:void(0)">网站地图</a></li>
				</ul>
				<p class="text">
					京ICP证：050016号《网络文化经营许可证》编号：文网文【2017】8929-1007号《网络视听许可证》编号：0110587 京公网安备11010502033859号 完美世界（北京）软件科技发展有限公司版权所有
				</p>
				<div class="link">
					<a href="javascript:void(0)"><img src="image/shopping/copyright01.jpg" alt=""></a>
					<a href="javascript:void(0)"><img src="image/shopping/copyright02.jpg" alt=""></a>
					<a href="javascript:void(0)"><img src="image/shopping/copyright03.jpg" alt=""></a>
					<a href="javascript:void(0)"><img src="image/shopping/copyright04.jpg" alt=""></a>
					<a href="javascript:void(0)"><img src="image/shopping/copyright05.jpg" alt=""></a>
				</div>
			</div>
		</div>

	</div>
</body>
<script src = "js/shopping.js"></script>
</html>